<template>
  <div class="index">
    <el-container >
      <el-header height="80px">
        <div style="width:150px; height:60px; margin-top:10px; float:left; ">
          <img src="../../assets/brand.png" class="header-logo">
        </div>

        <el-dropdown @command="handleCommand" style="float:right;margin-right:20px;">
          <span class="el-dropdown-link" >
            <img src=""  class="img-circle" />
            {{ userInfo.name }}
            <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
          </span>
          <el-dropdown-menu>
            <el-dropdown-item command="1">用户信息</el-dropdown-item>
            <el-dropdown-item command="2">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
     
        <!-- Supreme!!! {{count}} {{countAlias}} {{count2}} {{doneTodosCount}}  -->
        
       
      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-menu
            style="min-height:800px"
            router
            default-active="index"
            active-text-color="#409EF"
          >
            <el-submenu :index="item.id.toString()" 
              :key="item.id" 
              v-for="item in menu">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <span>{{item.title}}</span>
              </template>
              <el-menu-item
                v-for="i in item.sub_permission"
                :index="i.route"
                :key="i.id"
              >{{i.title}}</el-menu-item>
              <!-- <el-menu-item 
              :key="i.id"
              :index="i.route"
              v-for="i in item.sub_permission"
              :route="{name: i.route, params: {}}">
              {{i.title}}
              </el-menu-item>-->
            </el-submenu>
          </el-menu>
        </el-aside>

        <!-- body部分 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <!-- 用户信息dialog -->
    <!-- <el-dialog class="dialog" title="个人资料" :visible.sync="dialogVisibleUser" width="30%">
      <user-info :infoForm="userInfo" @update="dialogVisibleUser=false"></user-info>
    </el-dialog> -->
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState, mapGetters, mapActions } from "vuex";
import * as  rootApi  from "@/api/root.js";
// import Storage from "@/config/storage.js";
// import UserInfo from "./user/UserInfo";
import store from '@/store/index.js';

export default {
  // components: { UserInfo },
  name: "index",
  props: {
    msg: String
  },
  /* computed: mapState({
    count: state => state.count,//箭头函数
    countAlias: 'count',
    
  }), */

  data() {
    return {
      status: 0,
      userInfo: {},
      dialogVisibleUser: false
      // imgPrefix: 'http://sd.martin.net/storage/',
    };
  },
  //计算属性
  computed: {
    count() {
      return this.$store.state.count;
    },
    ...mapState({
      count2: state => state.count, //箭头函数
      countAlias: "count",
      menu1: "menu"
    }),
    ...mapGetters(["doneTodosCount", "imgPrefix", "menu"])
  },

  created() {
    this.setSysConfig();

    this.getUser();
  },

  methods: {
    ...mapActions([
      'setSysConfig'
      ]),

    getUser() {
      rootApi.userInfo().then(res => {
        // // console.log(res.data.user);
        this.userInfo = res.dat;
        // //用户头像
        // let avatar_path = this.userInfo.avatar_path;
        // if (this.userInfo.avatar_path) {
        //   avatar_path = this.imgPrefix + avatar_path;
        // } else {
        //   avatar_path = "../assets/user-def.jpg";
        // }
        // this.userInfo.avatar_path = avatar_path;
      });
    },

    logout() {
      // Storage.removeSession();
      store.commit('setLogout');
      this.$router.push({ path: "/login" });
    },

    handleCommand(command) {
      switch (command) {
        case "1":
          this.dialogVisibleUser = true;
          break;
        case "2":
          this.logout();
          break;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header,
.el-footer {
  background-color: #20a0ff;;
  color: #333;
  text-align: center;
  line-height: 80px;
}

.el-aside {
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #fff;
  font-size: 20px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.img-circle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  vertical-align: middle;
  margin-left:20px;
  margin-right:20px;
}
</style>
